<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-03-02 13:39:00
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-03-20 10:24:53
 * @FilePath: /shortRent-ui/src/views/car/illegal/components/recordList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog title="充值及消费记录" :visible.sync="visible" @close="close">
    <div v-if="list.length > 0" style="overflow: auto;">
      <ul :infinite-scroll-disabled="disabled">
        <li class="recordItem" v-for="(item, index) in list" :key="index">
          <p>{{ item.type == 1 ? '+' : '-' }} {{ item.operatingAmount }}</p>

          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              账户余额: {{ item.changeAfterAmount }} 元
            </el-col>
            <el-col v-if="item.type == 2" :span="11">
              {{ item.businessTypeDesc }}: {{ item.businessNo }}
            </el-col>
            <el-col :span="6">
              {{ item.createTime }}
            </el-col>
          </el-row>
        </li>
      </ul>
      <p style="width: 100%;text-align: center;" v-if="loading">加载中...</p>
      <p style="width: 100%;text-align: center;" v-if="noMore">没有更多了</p>
    </div>
    <el-empty v-else description="暂无记录">
    </el-empty>

    <span slot="footer">
      <el-button @click="close">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as tenantApi from '@/api/system/tenant';
export default {
  data() {
    return {
      visible: false,
      loading: false,
      tenantId: '',
      total: 0,
      list: [],
      params: {
        pageNum: 1,
        pageSize: 100
      }
    }
  },
  computed: {
    noMore() {
      return this.list.length >= this.total;
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    // 获取充值消费记录
    getRecordList() {
      this.loading = true
      tenantApi.tenantRechargeRecord(this.tenantId, this.params).then(res => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    show(tenantId) {
      this.tenantId = tenantId;
      this.getRecordList();
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  },
}
</script>
<style lang="scss">
.recordItem {
  border-bottom: 1px solid #cecece;
  padding: 10px 0;
}

ul li {
  list-style: none;
}
</style>